<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example is demonstrated how to create cascading ComboBox. The data source of the "Orders" Combobox is updated dynamically depending on the selected Customer.</title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script> 
    <script type="text/javascript">
	$(document).ready(function () {
		
		// prepare the data
		var customersSource =
		{
			datatype: "json",
			datafields: [
				{ name: 'CompanyName'},
				{ name: 'CustomerID'}
			],
			url: 'cascadingcombobox_data.php',
			cache: false,
            async: false
		};

		var customersAdapter = new $.jqx.dataAdapter(customersSource);

		$("#customers").jqxComboBox(
		{
			source: customersAdapter,
			
			width: 200,
			height: 25,
			promptText: "Select customer...",
			displayMember: 'CompanyName',
			valueMember: 'CustomerID'
		});    

		var ordersSource =
		{
			datatype: "json",
			datafields: [
				{ name: 'CustomerID'},
				{ name: 'OrderID'},
				{ name: 'ShipCity'},
				{ name: 'OrderDate'},
				{ name: 'ShipName'},
				{ name: 'ShipCountry'},
				{ name: 'ShipAddress'}
			],
			url: 'cascadingcombobox_data.php',
			cache: false,
			async: false
		};
		var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
		
		$("#orders").jqxComboBox(
		{
			
			width: 200,
			height: 25,
			disabled: true,
			promptText: "Select order...",
			displayMember: 'OrderID',
			valueMember: 'CustomerID',
			autoDropDownHeight: true
		});   
		
		$("#customers").bind('select', function(event)
		{
			if (event.args)
			{
				$("#orders").jqxComboBox({ disabled: false, selectedIndex: -1});		
				var value = event.args.item.value;
				ordersSource.data = {CustomerID: value};
				ordersAdapter = new $.jqx.dataAdapter(ordersSource);
				$("#orders").jqxComboBox({source: ordersAdapter});
			}
		});   
		
		$("#orders").bind('select', function(event) 
		{
			if (event.args)
			{
				var index = $("#orders").jqxComboBox('selectedIndex');		
				if (index != -1)
				{
					var record = ordersAdapter.records[index];
					var details = "<table><tr><td>OrderDate</td><td>ShipCity</td><td>ShipCountry</td><td>ShipAddress</td><td>ShipName</td></tr>";
					details += "<tr><td>" + record.OrderDate + "</td><td>" + record.ShipCity + "</td><td>" + record.ShipCountry + "</td><td>" + record.ShipAddress + "</td><td>" + record.ShipName + "</td></tr>";
					$("#orderInfo").html(details);
				}
			}
		});
	});
    </script>
</head>
<body class='default'>
  <div>
    <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Customers:</span><div style="margin-left: 5px; float: left;" id="customers"></div>
	<div style='clear: both;'></div>
  <div style='margin-top: 20px;'>
    <span style="margin-top: 6px; font-size: 12px; font-family: verdana; float: left;">Orders:</span><div style="margin-left: 5px; float: left;" id="orders"></div>
   <br />
  <div style="margin-top: 25px; font-size: 12px; font-family: verdana;" id="orderInfo"></div>
   </div>
    </div>
</body>
</html>
<!--cascadingcombobox_data.php
  #Include the connect.php file
  include ('connect.php');

// Connect to the database
// connection String
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
	{
	printf("Connect failed: %s\n", mysqli_connect_error());
	exit();
	}
if (isset($_GET['CustomerID']))
	{
	// get data and store in a json array
	$query = "SELECT CustomerID, ShipCity, OrderID, OrderDate, ShipName, ShipAddress, ShipCountry FROM orders where CustomerID=?";
	$result = $mysqli->prepare($query);
	$result->bind_param('s', $_GET['CustomerID']);
	$result->execute();
	/* bind result variables */
	$result->bind_result($CustomerID, $ShipCity, $OrderID, $OrderDate, $ShipName, $ShipAddress, $ShipCountry);
	/* fetch values */
	while ($result->fetch())
		{
		$orders[] = array(
			'CustomerID' => $CustomerID,
			'ShipCity' => $ShipCity,
			'OrderID' => $OrderID,
			'OrderDate' => $OrderDate,
			'ShipName' => $ShipName,
			'ShipAddress' => $ShipAddress,
			'ShipCountry' => $ShipCountry
		);
		}
	echo json_encode($orders);
	/* close statement */
	$result->close();
	return;
	}
// get data and store in a json array
$query = "SELECT CustomerID, CompanyName  FROM Customers";
$result = $mysqli->prepare($query);
$result->execute();
/* bind result variables */
$result->bind_result($CustomerID, $CompanyName);
/* fetch values */
while ($result->fetch())
	{
	$customers[] = array(
		'CustomerID' => $CustomerID,
		'CompanyName' => $CompanyName
	);
	}
echo json_encode($customers);
$result->close();
/* close connection */
$mysqli->close();
-->